<template lang="">
    <div>
        <h2>财务记账</h2>
        <el-divider></el-divider>
        <el-form :inline="true" :model="sardate" class="demo-form-inline demo-form-inline-left">
            <el-form-item label="盘点单号">
                <el-input v-model="sardate.serialNo" placeholder="财务单号" style="width:180px"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="sardate.name" placeholder="财务单号" style="width:180px"></el-input>
            </el-form-item>
            <el-form-item label="支付类别">
              <el-select v-model="sardate.classifyId" placeholder="支付方式" style="width:100px">
                <el-option label="全部" :value="0"></el-option>
      <el-option v-for="item in payTypelist" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
    </el-select>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker v-model="sardate.paytimes" type="date" placeholder="开始日期" style="width:180px">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker v-model="sardate.paytimee" type="date" placeholder="结束日期" style="width:180px">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetAccountingDtoPas" icon="el-icon-search">查询</el-button>
                <el-button type="primary" class="el-icon-refresh-right" @click="reseted">重置</el-button>
<el-button type="success" @click="exportListToExcel(multipleSelection)">导出<i
                        class="el-icon-upload el-icon--right"></i></el-button>
            </el-form-item>
        </el-form>

        </el-form>

         <!-- 列表 -->
        <template>
            <el-table :data="getAccountinlist" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="serialNo" label="流水号">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="typeName" label="付款方式">
                </el-table-column>
                <el-table-column prop="payOrCollection" label="收款方/付款方">
                </el-table-column>
                <el-table-column prop="type" label="类型">
                </el-table-column>
                <el-table-column prop="payPrice" label="付款金额">
                </el-table-column>
                
                <el-table-column prop="paytime" label="付款时间">
                    <template slot-scope="sc">
                        {{ sc.row.paytime.substr(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="payInstitution" label="付款机构">
                </el-table-column>
            </el-table>
        </template>
<!-- 分页 -->
<el-form :inline="true" class="btu">
  <el-form-item >
    共{{page.totalCount}}条,共{{page.pageCount}}页,当前{{page.page}}/{{page.page.pageCount}}页,每页显示{{page.size}}条
    </el-form-item>
    <el-form-item >
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      layout="sizes,slot, prev, pager, next"
      :total="page.totalCount" prev-text="上一页" next-text="下一页" >
      <button @click="handleCurrentChange(1)" :disabled="page.page==1">首页</button>
    </el-pagination>
    </el-form-item>
    <el-form-item >
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[2, 10, 15, 20]"
      :page-size="page.size"
      layout="slot, jumper"
      :total="page.totalCount" prev-text="上一页" next-text="下一页" >
      <button @click="handleCurrentChange(page.pageCount)" :disabled="page.page==page.pageCount">尾页</button>
    </el-pagination>
    
    </el-form-item>
</el-form>

    </div>
</template>
<script>
import { GetPayType } from "@/api/BusinessServers/salesReturnSer";
import { GetAccountingDtoPas } from "@/api/BusinessServers/AccountingMent";
import XLSX from 'xlsx';
export default {
    //数据
    data() {
        return {
            sardate: {
                serialNo: "",
                name: "",
                classifyId: 0,
                paytimes: "",
                paytimee: "",
            },
            page: {
                page: 1,
                size: 5,
                totalCount: 0,
                pageCount: 0,
            },
            //财务列表
            getAccountinlist: [],
            //支付方式
            payTypelist: [],
            multipleSelection: [],
        }
    },
    //方法
    methods: {
        //分页
        handleSizeChange(val) {
            this.page.size = val;
            this.GetAccountingDtoPas();
        },
        handleCurrentChange(val) {
            this.page.page = val;
            this.GetAccountingDtoPas();
        },
        //重置
        reseted() {
            this.sardate = {
                serialNo: "",
                name: "",
                classifyId: 0,
                paytimes: "",
                paytimee: "",
            }
            this.GetAccountingDtoPas();
        },
        //批量删除获取列表
        handleSelectionChange(val) {
            this.multipleSelection = val;
            //console.log(this.multipleSelection);
        },
        //导出
        exportListToExcel(dataList) {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: '请选择要导出的数据',
                    type: 'warning'
                });
                return;
            }
            // 过滤需要导出的字段
            const filteredData = dataList.map(item => {
                return {
                    编号: item.id,
                    流水号: item.serialNo,
                    名称: item.name,
                    付款方式: item.typeName,
                    收款方付款方: item.payOrCollection,
                    类型: item.type,
                    付款金额: item.payPrice,
                    付款时间: item.paytime.substr(0, 10),
                    付款机构: item.payInstitution,
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(filteredData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件
            XLSX.writeFile(workbook, '财务记账.xlsx');

        },
        //财务类型
        GetPayType() {
            GetPayType().then((res) => {
                this.payTypelist = res.data.data;
            })
        },
        //财务列表
        GetAccountingDtoPas() {
            console.log(111111);
            var myparams = {
                serialNo: this.sardate.serialNo,
                name: this.sardate.name,
                classifyId: this.sardate.classifyId,
                paytimes: this.sardate.paytimes,
                paytimee: this.sardate.paytimee,
                page: this.page.page,
                size: this.page.size,
            }
            console.log(myparams);
            GetAccountingDtoPas(myparams).then((res) => {
                console.log(1111, res);
                this.getAccountinlist = res.data.data;
                this.page.totalCount = res.data.totalCount;
                this.page.pageCount = res.data.pageCount;
            })
        },
    },
    //监听
    mounted() {
        this.GetPayType();
        this.GetAccountingDtoPas();
    },
}
</script>
<style lang="">
  .demo-form-inline-left {
    text-align: left;
}

.demo-form-inline-right {
    text-align: right;
}  
</style>